<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">数据大屏</div>
      </div>
      <div class="p-cont">
        <div class="pc-left pc-item">
          <!-- <iframe src="https://bigscreen.wanhuhealth.com/" frameborder="0" />
           -->
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/saas/bigscreen.png"
            alt="大屏"
          />
        </div>
        <div class="pc-right pc-item">
          <p class="pc-title">一、 功能介绍</p>
          <p>
            用丰富酷炫的数据可视化大屏幕，实时展示业务数据，满足多场景数据展示需求，提升业务展示效果。
          </p>
          <p class="pc-title">二、使用场景</p>
          <ul>
            <li>
              活动场景：讲师进行直播带货时，可以将「成交金额」设置为核心指标，用大屏幕投影，讲师一边直播一边可以实时看到自己的带货效果，成交金额曲线的攀升、数字的跳动让带货热情直线提升。
            </li>
            <li>
              引流公开课场景：运营同学可以根据实时大屏监控直播间人流量，判断是否需要修改运营动作，及时优化直播策略。讲师还可以监控邀请榜单，在直播间实时给与激励，刺激老带新转化。
            </li>
            <li>
              品牌宣传场景：想要吸引更多的合作伙伴，直播实时数据大屏可以作为优质的宣传物料，向合作伙伴展示自己优秀的直播效果，邀请合作伙伴一起看数据大屏感受火热的直播氛围。
            </li>
          </ul>
        </div>
      </div>
      <div class="p-cont mt40">
        <div class="download">
          <el-card shadow="always">
            <div class="icon">
              <svg
                t="1672991491160"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2701"
                width="200"
                height="200"
              >
                <path
                  d="M523.8 191.4v288.9h382V128.1zM523.8 833.6l382 62.2v-352h-382zM120.1 480.2H443V201.9l-322.9 53.5zM120.1 770.6L443 823.2V543.8H120.1z"
                  p-id="2702"
                />
              </svg>
            </div>
            <div class="title">PC电脑版</div>
            <div class="des">
              适用于安装Windows系统的电脑，绿色免安装，下载后直接双击打开使用，适合长期展示。
            </div>
            <el-button type="primary" :icon="Download" @click="downloadPC"
              >立即下载</el-button
            >
          </el-card>
          <el-card shadow="always">
            <div class="icon">
              <svg
                t="1672991629743"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3658"
                width="200"
                height="200"
              >
                <path
                  d="M615.878882 177.494507l42.303478-61.521169c1.811252-2.619664 1.146103-6.252401-1.473561-8.063653l-1.054005-0.726547c-2.619664-1.821485-6.231935-1.146103-8.043187 1.473561l-43.521213 63.291488c-28.427446-12.361539-60.139705-19.268856-93.601818-19.268856-31.753191 0-61.950957 6.221702-89.232301 17.426905l-41.587164-60.477396c-1.801019-2.619664-5.423523-3.284813-8.043187-1.473561l-1.054005 0.726547c-2.619664 1.811252-3.284813 5.443989-1.483794 8.073886l40.215934 58.461483c-63.23009 30.300097-108.664885 88.075964-117.915573 156.299789l438.20018 0C720.552873 265.017886 676.919097 208.296023 615.878882 177.494507zM418.217057 265.621637c-12.054547 0-21.837354-9.813506-21.837354-21.908986 0-12.095479 9.782807-21.898753 21.837354-21.898753 12.06478 0 21.837354 9.803273 21.837354 21.898753C440.054411 255.80813 430.281837 265.621637 418.217057 265.621637zM606.710059 265.621637c-12.054547 0-21.837354-9.813506-21.837354-21.908986 0-12.095479 9.782807-21.898753 21.837354-21.898753 12.06478 0 21.837354 9.803273 21.837354 21.898753C628.547413 255.80813 618.774839 265.621637 606.710059 265.621637z"
                  p-id="3659"
                />
                <path
                  d="M260.904195 419.506423l0 179.446975c0 30.760584-19.596314 55.933917-43.562145 55.933917l-9.680477 0c-23.955598 0-43.562145-25.173332-43.562145-55.933917l0-179.446975c0-30.760584 19.606547-55.923684 43.562145-55.923684l9.680477 0C241.307881 363.582739 260.904195 388.745838 260.904195 419.506423z"
                  p-id="3660"
                />
                <path
                  d="M859.896478 420.570661l0 179.446975c0 30.770817-19.596314 55.933917-43.562145 55.933917l-9.680477 0c-23.955598 0-43.562145-25.163099-43.562145-55.933917l0-179.446975c0-30.760584 19.606547-55.923684 43.562145-55.923684l9.680477 0C840.300164 364.646977 859.896478 389.810077 859.896478 420.570661z"
                  p-id="3661"
                />
                <path
                  d="M732.934878 360.830045l0 354.074178c0 24.579815-20.046568 44.687782-44.554752 44.687782l-36.746926 0 0 102.320387c0 30.760584-19.606547 55.923684-43.562145 55.923684l-9.680477 0c-23.955598 0-43.562145-25.163099-43.562145-55.923684l0-102.320387-81.864496 0 0 101.143585c0 30.760584-19.596314 55.933917-43.562145 55.933917l-9.680477 0c-23.955598 0-43.562145-25.173332-43.562145-55.933917l0-101.143585-40.062438 0c-24.508183 0-44.554752-20.107967-44.554752-44.687782l0-354.074178L732.934878 360.830045z"
                  p-id="3662"
                />
              </svg>
            </div>
            <div class="title">安卓版</div>
            <div class="des">
              适用于安装Android系统的智能电视、智能机顶盒等，需安装后方可使用，Android系统要求版本不低于9.0
            </div>
            <el-button type="primary" :icon="Download" @click="downloadAndroid"
              >立即下载</el-button
            >
          </el-card>
          <el-card shadow="always">
            <div class="icon">
              <svg
                t="1672991680738"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6251"
              >
                <path
                  d="M258.016 447.008L112 192.992Q183.008 102.976 288 51.488T512 0q138.016 0 255.488 68t185.504 183.008H534.976q-11.008-0.992-23.008-0.992-90.016 0-160.992 55.488t-92.992 141.504z m436.992-122.016h294.016q35.008 90.016 35.008 187.008 0 103.008-40 197.504t-107.488 163.008-161.504 109.504-196.992 42.016l208.992-363.008q47.008-67.008 47.008-148.992 0-110.016-79.008-187.008zM326.016 512q0-76.992 54.496-131.488T512 326.016t131.488 54.496T697.984 512t-54.496 131.488T512 697.984t-131.488-54.496T326.016 512z m256 252.992l-146.016 252.992q-122.016-18.016-222.016-88.992t-156.992-180.992T0 512q0-135.008 66.016-251.008l208.992 362.016q32 68 96 109.504T512 774.016q36 0 70.016-8.992z"
                  p-id="6252"
                />
              </svg>
            </div>
            <div class="title">网页版</div>
            <div class="des">
              适用于mac、linux等系统，保证在Chrome内能正常展示。
            </div>
            <el-button type="primary" @click="openBigScreen"
              >打开使用</el-button
            >
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted } from "vue";
import { Download } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth";
import * as CryptoJS from "crypto-js";

function openBigScreen() {
  const token = getToken();
  console.log("token:", token);
  let encrypted = "";
  if (token) {
    const key = "wanhu@123";
    // console.log("token.accessToken:", token.accessToken);
    encrypted = CryptoJS.AES.encrypt(token.accessToken, key).toString();
    // console.log("encrypted:", encrypted);
  }

  window.open(
    "https://bigscreen.wanhuhealth.com/?at=" + encodeURIComponent(encrypted),
    "_blank"
  );
}

function downloadPC() {
  window.open(
    "https://wanhu-exe.oss-cn-beijing.aliyuncs.com/WanhuBigScreen_1.0.3.exe",
    "newWin"
  );
}

function downloadAndroid() {
  ElMessageBox.alert("开发中，敬请期待！", "提示");
}
onBeforeMount(() => {});
onMounted(() => {});
</script>
<style scoped lang="scss">
.mt40 {
  margin-top: 40px !important;
}

.p-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .pc-left {
    width: 60%;

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .pc-right {
    width: 40%;
    box-sizing: border-box;
    padding: 0px 20px;

    .pc-title {
      margin-bottom: 20px;
    }

    ul {
      margin-left: 20px;
      margin-top: 20px;
    }

    li {
      list-style: disc;
    }
  }

  .download {
    width: 100%;
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: space-between;

    .el-card {
      width: 30%;
      position: relative;

      .icon {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 5px;
        right: 5px;
        color: #bbb;

        svg {
          width: inherit;
          height: inherit;
        }
      }

      .des {
        margin-top: 30px;
        height: 70px;
      }

      .el-button {
        margin-top: 20px;
      }
    }
  }
}
</style>
